<template>
	<view class="notice">
		<template v-if="notifyList.length">
			<view :key="index" v-for="(item, index) in notifyList" @click="toNoticeList(item, 'system')" class="notice-item">
				<view class="left">
					<view class="img">
						<!-- <image src="/static/images/my/customer.png"></image> -->
						<image src="/static/images/my/system-icon.png"></image>
						<view v-if="item.readFlag == 'n'" class="small-icon"><text></text></view>
					</view>
					<view class="content">
						<text class="title">{{ item.notifyType == 'system' ? '系统通知' : '活动通知' }}</text>
						<text class="detail">{{ item.notifyTitle }}</text>
					</view>
				</view>
				<view class="right">
					<text>{{ item.createdTime | displayTimeFormat }}</text>
				</view>
			</view>
		</template>
		<template v-if="userMessageList.length">
			<view :key="index" v-for="(item, index) in userMessageList" @click="toNoticeList(item, 'user')" class="notice-item">
				<view class="left">
					<view class="img">
						<image src="/static/images/my/customer.png"></image>
						<!-- <image src="/static/images/my/system-icon.png"></image> -->
						<view v-if="item.readFlag == 'n'" class="small-icon"><text></text></view>
					</view>
					<view class="content">
						<text class="title">{{ item.messageContent || '' }}</text>
						<!-- <text class="detail">{{ item.messageContent }}</text> -->
					</view>
				</view>
				<view class="right">
					<text>{{ item.createdTime | displayTimeFormat }}</text>
				</view>
			</view>
		</template>

		<Loading v-if="loading"></Loading>
		<view v-if="(!loading && notifyList.length) || (!loading && userMessageList.length)" class="loading-more"><text class="loading-more-text">~~没有更多了~~</text></view>
	</view>
</template>

<script>
import datetimeHelper from '@/utils/time.js';
import { userMessageListPage, notifyListPage } from '@/service/notify.js';

export default {
	data() {
		return {
			userMessageList: [],
			notifyList: [],

			loading: true,

			params: {
				pageSize: 10,
				pageNum: 1
			}
		};
	},
	onLoad({ type = 'notice' }) {
		this.type = type;
		this.initData();
	},
	async onPullDownRefresh() {
		this.initData();
		setTimeout(() => {
			uni.stopPullDownRefresh();
		}, 500);
	},
	filters: {
		/**
		 * 通知显示说明：
		1.当天展示时间，格式为：hh：mm;
		2.隔天展示日期，格式为：MM-dd;
		3.隔年展示日期，格式为：yyyy-MM-dd ;
		* @param {*} time  time时间格式为2020-04-06 14:20:59
		 */
		displayTimeFormat(value) {
			// 处理提醒的时间显示
			if (typeof value === 'string') {
				let time = value.replace('T', ' ').substr(0, 19);
				return datetimeHelper.displayNoticeTime(time);
			} else {
				return '';
			}
		}
	},
	methods: {
		initData() {
			if (this.type == 'notice') {
				this.getNotifyListPage();
			} else {
				this.getUserMessageListPage();
			}
		},
		async getNotifyListPage() {
			try {
				this.loading = true;
				const resp = await notifyListPage(this.params);
				this.notifyList = this.params.pageNum == 1 ? resp.data : [...this.notifyList, ...resp.data];
			} finally {
				this.loading = false;
				//TODO handle the exception
			}
		},
		async getUserMessageListPage() {
			try {
				this.loading = true;
				const resp = await userMessageListPage(this.params);
				this.userMessageList = this.params.pageNum == 1 ? resp.data : [...this.userMessageList, ...resp.data];
			} finally {
				this.loading = false;
				//TODO handle the exception
			}
		},
		toNoticeList(item, type) {
			this.$store.commit('save', item);
			uni.navigateTo({
				url: '/pages/mine/message/detail?type=' + type
			});
		}
	}
};
</script>

<style lang="scss" scoped>
view {
	display: flex;
}
.notice {
	background-color: #ffffff;
	width: 750upx;
	height: 100%;
	/* height: 100%; */
	flex-direction: column;
	justify-content: flex-start;
	align-items: center;
}

.notice-item {
	width: 690upx;
	height: 150upx;
	border-bottom: 1upx solid #f5f5f5;
	justify-content: space-between;
	align-items: center;
	.left {
		width: 450rpx;
		// text-overflow: ellipsis;
		// display: -webkit-box;
		// overflow: hidden;
		// white-space: normal;
		// text-overflow: ellipsis;
		// word-wrap: break-word;
		// -webkit-line-clamp: 1;
		// -webkit-box-orient: vertical;
		justify-content: flex-start;
		align-items: center;
		.img {
			position: relative;
			margin-right: 20upx;
			image {
				border-radius: 35upx;
				width: 70upx;
				height: 70upx;
			}
			.small-icon {
				position: absolute;
				left: 48upx;
				width: 28upx;
				height: 28upx;
				border-radius: 14upx;
				background-color: #f87d6f;
				justify-content: center;
				align-items: center;
				text {
					color: #ffffff;
					font-size: 20upx;
				}
			}
		}
		.content {
			width: 356px;
			flex-direction: column;
			align-items: flex-start;
			.title {
				color: #323437;
				font-size: 28upx;
				margin-bottom: 17upx;
			}
			.detail {
				text-overflow: ellipsis;
				display: -webkit-box;
				overflow: hidden;
				white-space: normal;
				text-overflow: ellipsis;
				word-wrap: break-word;
				-webkit-line-clamp: 1;
				-webkit-box-orient: vertical;
				color: #66789c;
				font-size: 24upx;
			}
		}
	}
	.right {
		height: 70upx;
		align-items: flex-start;
		text {
			color: #66789c;
			font-size: 22upx;
		}
	}
}
.message-list {
	width: 750upx;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	.message-item {
		width: 690upx;
		height: 150upx;
		border-bottom: 1upx solid #f5f5f5;
		justify-content: space-between;
		align-items: center;
		.left {
			flex: 1;
			justify-content: flex-start;
			align-items: center;
			.message-item-img {
				margin-right: 20upx;
				width: 70upx;
				height: 70upx;
				background-color: #ebebeb;

				image {
					border-radius: 35upx;
					width: 100%;
					height: 100%;
				}
			}
			.content {
				/* width: 480upx; */
				flex: 1;
				flex-direction: column;
				align-items: flex-start;
				.content-top {
					margin-bottom: 17upx;
					justify-content: flex-start;
					.name {
						color: #323437;
						font-size: 28upx;
						margin-right: 10upx;
					}
					.type {
						border: 1upx solid #323437;
						border-radius: 6upx;
						text {
							color: #323437;
							font-size: 18upx;
							margin: 6upx 8upx;
						}
					}
				}
				.detail {
					display: flex;
					flex-direction: column;
					width: 100%;
					/* width: 422px; */
					.title {
						color: #323437;
						font-size: 24rpx;
						text-overflow: ellipsis;
						display: -webkit-box;
						overflow: hidden;
						white-space: normal;
						text-overflow: ellipsis;
						word-wrap: break-word;
						-webkit-line-clamp: 1;
						-webkit-box-orient: vertical;
					}
				}
				.desc {
					color: #66789c;
					font-size: 24upx;
					text-overflow: ellipsis;
					display: -webkit-box;
					overflow: hidden;
					white-space: normal;
					text-overflow: ellipsis;
					word-wrap: break-word;
					-webkit-line-clamp: 1;
					-webkit-box-orient: vertical;
				}
			}
		}
		.right {
			height: 66upx;
			flex-direction: column;
			align-items: flex-end;
			justify-content: space-between;
			.time {
				color: #66789c;
				font-size: 22upx;
			}
			.state {
				color: #45ceb3;
				font-size: 22upx;
			}
		}
	}
}
.tip {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	margin: 83upx 0 187upx;
	.icon {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		width: 160upx;
		height: 160upx;
		background: rgba(255, 255, 255, 1);
		border: 1upx solid rgba(240, 240, 240, 1);
		border-radius: 50%;
		image {
			width: 106upx;
			height: 78upx;
		}
	}
	.title {
		margin-top: 36upx;
		font-size: 34upx;
		width: 578upx;
		font-weight: bold;

		color: rgba(50, 52, 55, 1);
	}
}
.wechat {
	width: 690upx;
	height: 90upx;
	background: rgba(69, 206, 179, 1);
	border-radius: 10upx;
	font-size: 36upx;
	font-family: Noto Sans S Chinese;
	font-weight: 400;
	display: flex;
	justify-content: center;
	align-items: center;
	color: rgba(255, 255, 255, 1);
	image {
		width: 50upx;
		height: 40upx;
		margin-right: 20upx;
	}
}
.phone {
	margin-top: 40upx;
	width: 690upx;
	height: 90upx;
	background: rgba(50, 145, 249, 1);
	display: flex;
	justify-content: center;
	align-items: center;
	border-radius: 10upx;
	font-size: 36upx;
	font-weight: 400;
	color: rgba(255, 255, 255, 1);
	image {
		width: 32upx;
		height: 40upx;
		margin-right: 20upx;
	}
}
.loading-more {
	display: flex;
	align-items: center;
	justify-content: center;
	padding-top: 28upx;
	padding-bottom: 28upx;
	text-align: center;
}

.loading-more-text {
	font-size: 28upx;
	color: #999;
}
</style>
